<template>
	<view class="">
		<view v-if="userToken" class="">
		<!-- <view class=""> -->
		<view class="bjtp">
			<image class="toux" @click="editHead" :src="src"></image>
			<view class="nickname">
				{{nname}}
			</view>
		</view>
	<!-- 	<view class="myOrder media-foot">
			<view @click="payDetail(a=1)">
				<view class="bigPay">
					<img class="pay" src="../../static/首页-待付款.png" alt="" srcset="">
				</view>
				<view class="">
					待支付
				</view>
			</view>
			<view @click="payDetail(a=2)">
				<view class="bigPay">
					<img class="pay" src="../../static/已付款.png" alt="" srcset="">
				</view>
				<view class="">
					已支付
				</view>
			</view>
		</view> -->
		
		<view class="">
			<view @click="changeInfrom" class="singleinform">
				修改个人信息
			</view>
			<view @click="editPass" class="singleinform">
				修改密码
			</view>
			<view @click="myOrder" class="singleinform">
				我的订单
			</view>
			<view @click="loginout" class="singleinform">
				退出登录
			</view>
		</view>
	  </view>
	 <view v-else class="">
	  	<button @click="loginButton" class="loginButton">请先登录</button>
	  </view>
	</view>
</template>

<script>
	import baseUrl from '@/utils/tools.js'
	export default{
		data(){
			return{
				src:'',
				userToken:null,
				nname:''
			}
		},
		methods:{
			//获取订单列表
			orderList:async function(current=1){
				const id = JSON.parse(localStorage.getItem('user')).id
				console.log(id)
				const res = await this.$api.orderList({
					accountId:id,
					current
				})
				console.log(res)
				localStorage.setItem("ordertotal",res.data.pages)
			},
			editPass(){
				uni.navigateTo({
					url:'./changePassword'
				})
			},
			//请先登录
			loginButton(){
				uni.navigateTo({
					url:'../login/login'
				})
			},
			// 获取昵称
			getNickname(){
				let nickn=JSON.parse(localStorage.getItem('user'))
				console.log(nickn)
				this.nname=nickn.nickName
			},
			//跳转到修改密码页
			changePassword(){
				uni.navigateTo({
					url:'./changePassword'
				})
			},
			//跳转到订单页面
			// payDetail(a){
			// 	console.log(a)
			// 	uni.navigateTo({
			// 		url:'../order/order?type='+a
			// 	})
			// },
			// 跳转到我的订单
			myOrder(){
				uni.navigateTo({
					url:'../order/order'
				})
			},
			//跳转到修改头像页面
			editHead(){
				uni.navigateTo({
					url:'./edit-head'
				})
			},
			changeInfrom(){
				uni.navigateTo({
					url:'../singleInform/singleInform'
				})
			},
			loginout(){
				localStorage.removeItem("token")
				localStorage.removeItem("user")
				localStorage.removeItem("ordertotal")
				this.nname=''
				this.$tool.loginout()
				this.userToken=false
				uni.navigateTo({
					url:"../login/login"
				})
			}
		},
		created(){
			// this.getNickname()
			// this.userToken=localStorage.getItem('token')?true:false
			console.log(this.userToken,987)
		},
		onLoad(){
			this.orderList()
		},
		onShow(){
			let toux = JSON.parse(localStorage.getItem('user')).avatar
			console.log(baseUrl.baseUrl,toux)
			this.src=baseUrl.baseUrl+toux
			this.getNickname()
			this.userToken=localStorage.getItem('token')?true:false
			this.orderList()
		},
		computed:{
			
		}
	}
</script>

<style>
	.media-foot {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-evenly;
	}
	/* .flex-row {
		flex-direction: row;
	} */
	.bjtp{
		/* width: 100vw; */
		height: 320rpx;
		background: url('https://img0.baidu.com/it/u=3148762156,486119709&fm=253&fmt=auto&app=138&f=JPEG?w=704&h=500');
		text-align: center;
	}
	.toux{
		border: 2rpx solid white;
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		margin-top: 90rpx;
		margin-bottom: 5rpx;
	}
	.nickname{
		font-size: 35rpx;
		color: white;
	}
	.singleinform{
		background-color: #f6f6f6;
		padding: 25rpx;
		text-align: center;
		margin: 15rpx;
		border-radius: 10rpx;
	}
	/* 我的订单 */
	.myOrder{
		background-color: #f1f1f1;
		margin: 15rpx;
		border-radius: 10rpx;
		padding: 20rpx 0;
		/* height: 200rpx; */
	}
	.pay{
		width: 50rpx;
		height: 50rpx;
	}
	.bigPay{
		text-align: center;
	}
	.loginButton{
		width: 300rpx;
		/* background-color: rgb(47, 133, 252);
		color: white; */
		background-color: rgb(118, 237, 214);
		/* padding: 60rpx; */
		color: white;
		font-size: 40rpx;
		margin-top: 500rpx;
	}
</style>